<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>组件嵌套</title>
		<script src="../../JS/vue.js"></script>
	</head>
	<body>
		<div id="root"></div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示

			//第一步 创建student组件
			const student = Vue.extend({
				name: 'student',
				template: `
                <div>
                    <h2>学生姓名:{{name}}</h2>
			        <h2>学生年龄:{{age}}</h2>
                </div>
                `,
				// el: '#root',
				//组件定义时 一定不要写el配置项,因为最终
				// 所有的组件都要被一个vm管理,由vm决定
				// 服务于哪个容器。
				data() {
					return {
						name: '张三',
						age: 22
					}
				}
			})
			//第一步 创建school组件
			const school = Vue.extend({
				name: 'school',
				template: `
                <div>
                    <h2>学校名称:{{name}}</h2>
			        <h2>学校地址:{{address}}</h2>  
                    <student></student>
                </div>
                `,
				// el: '#root',
				//组件定义时 一定不要写el配置项,因为最终
				// 所有的组件都要被一个vm管理,由vm决定
				// 服务于哪个容器。
				data() {
					return {
						name: '尚学堂',
						address: '赛蒂科技园'
					}
				},
				components: {
					student
				}
			})

			const hello = Vue.extend({
				name: 'hello',
				template: `
                  <div>
                    <h2>{{msg}}</h2>  
                  </div>
                `,
				data() {
					return {
						msg: '欢迎大家学习Vue!!!'
					}
				}
			})
			// 创建app组件
			const app = Vue.extend({
				name: 'app',
				template: `
                <div>
                    <hello></hello>
                    <school></school>
                </div>
                `,
				components: {
					school,
					hello
				},
				data() {
					return {
						name: 'App'
					}
				}
			})

			// 创建vm
			new Vue({
				template: `
                   <div>
                      <h2>{{msg}}</h2>
                      <hr/>
                      <app></app> 
                   </div>      
                `,
				el: '#root',
				// 第二步:注册组件(局部注册)
				data: {
					msg: '你好组件'
				},
				components: {
					app
				}
			})
		</script>
	</body>
</html>
